<template>
  <el-container>
    <el-menu default-active="1">
      <el-sub-menu :index="item.key" v-for="(item, index) in menuList" :key="index">
        <template #title>
          <el-icon><icon-menu /></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item @click="goLink(item2.path)" v-for="(item2, index2) in item.children" :index="item2.key"
          :key="index2">{{ item2.name }}</el-menu-item>
      </el-sub-menu>
      <!-- <el-menu-item index="2">
        <el-icon><icon-menu /></el-icon>
        <span>Navigator Two</span>
      </el-menu-item> -->
    </el-menu>
    <router-view class="box" />
  </el-container>
</template>

<script lang="ts" setup>
import {
  Menu as IconMenu,
} from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { menuListData } from './data';
const router = useRouter();
// 菜单数据
const menuList = ref(menuListData);

/**
 * 页面跳转
 */
const goLink = (path: string) => {
  router.push(path);
}

</script>

<style scoped lang="less">
.el-menu {
  height: 100vh;
  border: none;
  background: white;
  border-right: 2px solid rgb(245, 240, 240);
  width: 220px;
}

.el-menu-item.is-active {
  background: #e6f7ff;
  border-right: 3px solid #1890ff;
}

</style>